<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        section {
            display: flex;
            background-color: #ddd;
            width: 500px;
            height: 300px;
            outline: 5px solid yellow;
        }

        .left-side {
            background-color: red;
            flex: 0 1 150px;
            min-width:140px
        }

        .content {
            flex: 0 2 200px;
        }

        .right-side {
            background-color: blue;
            flex: 0 3 350px;
        }

        /*
          当子项目的flex-shrink总和大于>=1时，与flex-grow的计算方式并不相同

          flex-shrink 定义的仅仅只是元素宽度变小的一个权重分量。

          每个元素具体收缩多少，还有另一个重要因素，即它本身的宽度。

          所以每个项目的权重为：宽度*flex-shrink
          left：150 * 1 = 150
          content: 200 * 2 = 400
          right: 350 * 3 = 1050
          总权重：sum = 150 + 400 + 1050 = 1600;

          溢出宽度 = 500px - 150px - 200px - 350px =  -200px

          各个项目需要的收缩的宽度： = 溢出宽度 *（项目权重 / 总权重）
          left：200 *(150/1600) = 18.75px
          content: 200 * (400/1600)= 50px
          right: 200 * (1050/1600) = 131.25px

          最终宽度：
          left：150 -  18.75 = 131.25px
          content：200 - 50 = 150px
          right：350 - 131.25 = 218.75px

          当然，类似 flex-grow，flex-shrink 也会受到 min-width 的影响。当结果小于min-width的时候，优先使用min-width，其他子项目按照同样的计算方式相应的更收缩一点
        */
    </style>
</head>
<body>
<section>
    <div class="left-side">left-side</div>
    <div class="content">content</div>
    <div class="right-side">right-side</div>
</section>
</body>
</html>
